<template>
  <div>
    <div style="padding-bottom: 50px">
      <div style="float: left;margin-left: 400px;">
        <el-input
          placeholder="请输入内容"
          v-model="searchValue"
          clearable
          style="width: 300px" @change="searchChange">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <div style="float: left;margin-left: 60px;">
        <el-select v-model="roleSelectValue" @change="selChange" clearable placeholder="按角色查询">
          <el-option
            v-for="role in roleList"
            :key="role.rid"
            :value="role.rid"
            :label="role.rname">
          </el-option>
        </el-select>
      </div>
    </div>
    <!--表格数据-->
    <el-table
      :data="pageInfo.list"
      style="width: 100%">
      <el-table-column prop="lid" label="编号" width="180"></el-table-column>
      <el-table-column prop="tbUser.phone" label="操作人手机号" width="180"></el-table-column>
      <el-table-column prop="context" label="操作内容"></el-table-column>
      <el-table-column prop="roleName" label="操作人角色"></el-table-column>
      <el-table-column prop="logIp" label="ip地址"></el-table-column>
      <el-table-column prop="logTime" label="操作时间"></el-table-column>
    </el-table>
    <!--分页导航-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 15, 30, 50]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {getAllLog, search} from "../api/systemLog.js";

export default {
  data() {
    return {
      pageInfo: {
        pageNum: "1",
        pageSize: "5",
        total: "",
        list: []
      },
      searchValue: '',
      roleList: [],
      roleSelectValue: ''
    }
  },
  methods: {
    getAllLog() {
      getAllLog(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, roleSelectValue: this.roleSelectValue}
      ).then(res => {
        if (res.data.msg == '没有数据') {
          this.pageInfo.list = ''
          this.pageInfo.total = ''
        } else {
          this.pageInfo.list = res.data.data.pageInfo.list;
          this.pageInfo.pageNum = res.data.data.pageInfo.pageNum;
          this.pageInfo.pageSize = res.data.data.pageInfo.pageSize;
          this.pageInfo.total = res.data.data.pageInfo.total;
          this.roleList = res.data.data.roles;
        }
      })
    },
    //当前页发生改变
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.getAllLog();
    },
    //每页记录数发生改变
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getAllLog();
    },
    //搜索框查询
    search() {
      search(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, searchValue: this.searchValue}
      ).then(res => {
        if (res.data.msg == '没有数据') {
          this.pageInfo.list = ''
          this.pageInfo.total = ''
        } else {
          this.pageInfo.list = res.data.data.list;
          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        }
      })
    },
    //搜索框值改变
    searchChange() {
      if (this.searchValue == '') {
        this.getAllLog()
      }
    },
    //下拉框变化
    selChange() {
      this.getAllLog();
    },
  },
  created() {
    this.getAllLog();
  }
}
</script>
